<template>
    <div class="test">
        <el-button @click="openMsg">123</el-button>
        <el-input />
        {{ indexMsg }}
        <div class="test-active">
            {{ indexMsg }}
            <div class="test-active_b">123</div>
        </div>
        <el-slider v-model="value1"></el-slider>
        <Test :count="value1" />
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { ElMessage } from 'element-plus'
import Test from '../test.vue'

export default defineComponent({
    components: {
        Test,
    },
    setup() {
        const indexMsg = ref('index msg')
        const value1 = ref(10)
        const openMsg = () => {
            ElMessage.success({
                message: '恭喜你，这是一条成功消息',
                type: 'success',
            })
        }
        setTimeout(() => {
            value1.value = 20
        }, 3000)
        return {
            indexMsg,
            value1,
            openMsg,
        }
    },
})
</script>

<style lang="scss">
.test {
    color: $color;
    &-active {
        color: pink;
        &_b {
            color: darkorchid;
        }
    }
}
</style>
